﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=EDGE;IE=11;IE=8,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>批次模板查看</title>
    <link href="../../../Content/layui/dist/css/layui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../../../Scripts/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="../../../Scripts/array.pollyfill.js"></script>
    <style type="text/css">
        body
        {
          font: 12px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif !important;  
        }
        .layui-input, .layui-select, .layui-textarea 
        {
            height:24px;
            line-height:1.8;
        }
        
        /*下拉框*/
        .layui-form-select dl
        {
            top: 20px;
        }
        
        .form-input-lable
        {
            display:inline-block;
            height:12px;
            font-size:12px;
            height:15px;
            margin-bottom:3px;
        }
        
        .layui-input:hover, .layui-textarea:hover {
            border-color: #ccc !important;
        }
        
        .layui-badge-rim, .layui-border, .layui-colla-content, .layui-colla-item, .layui-collapse, .layui-elem-field, .layui-form-pane .layui-form-item[pane], .layui-form-pane .layui-form-label, .layui-input, .layui-layedit, .layui-layedit-tool, .layui-panel, .layui-quote-nm, .layui-select, .layui-tab-bar, .layui-tab-card, .layui-tab-title, .layui-tab-title .layui-this:after, .layui-textarea {
            border-color: #ccc;
            border-top-color: #ccc;
            border-right-color: #ccc;
            border-bottom-color: #ccc;
            border-left-color: #ccc;
        }
        
        .ufc-btn
        {
            color:#2f97c4;
            font-weight:bold;
            font-size:13px;  
            font-family:Tahoma, Helvetica;
            background:#eee;
            border-right-color:#000;
            border-bottom-color:#000;
            line-height:24px;
            height:24px;
        }
        
        .ufc-btn:hover
        {
            color:#000;
            background:#ccc;
            border-color:gray;
        }
        
        .ufcSectionStyle
        {
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffffff',EndColorStr='#d7f1ff');
            height:20px;
            border:#2f97c4 1px solid;
        }
        
        .ufcSectionSpanStyle {
            height:20px;
            line-height:20px;
            background:#2f97c4;
            font-weight:bold;
            color:#fff;
            padding:0 10px;
            margin-left:10px;
            FONT-SIZE: 10pt;
            display:inline-block;
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#d7f1ff',EndColorStr='#015175');
        }
        
        .layui-table-cell
        {
            font-size:12px;
            padding:0;
            padding-left:5px;
            color:#000;
            border-color:gray !important;
            height:24px;
        }
        
        .layui-table-view th div
        {
            background-color:#c7def4;
            /*border-color:#000;*/
            border-color:Gray;
        }

        .layui-table-view .layui-table td, .layui-table-view .layui-table th
        {
            padding:0;
        }
        
        /*设置表格行号列*/
        .laytable-cell-numbers
        {
            /*background:#c7def4;*/
        }
        
        .layui-table td, 
        .layui-table th, 
        .layui-table-header, 
        .layui-table-view, 
        .layui-table[lay-skin=line], 
        .layui-table[lay-skin=row],
        .layui-table-fixed-r, 
        .layui-table-grid-down,
        .layui-table-page, 
        .layui-table-total, 
        .layui-table-tips-main, 
        .layui-table-tool
        {    
            /*border-color:#000;*/
            border-color:Gray;
        }
        
        td[data-field="zhuigandate"]
        {
            /*background-color:Red !important;*/
        }
        td[data-field="zhuigandate"] input
        {
            /*width:100px !important; */
        }
    </style>
</head>
<body>
    <form class="layui-form" action="" style="margin:3px;" id="form">
        <div class="ufcSectionStyle">
            <span class="ufcSectionSpanStyle">查询区域</span>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline" style="width: 160px;">
                    <label class="form-input-lable">
                        批次：
                    </label>
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" />
                </div>
            </div>
            
            <div class="layui-inline">
                <div class="layui-input-inline" style="width: 160px;">
                    <label class="form-input-lable">
                        下拉框：
                    </label>
                    <select name="ddlResponsibleSector" lay-verify="required" id="ddlResponsibleSector" lay-search="">
                        <option value="山西">山西</option>
                        <option value="山东">山东</option>
                        <option value="北京">北京</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <div class="layui-input-inline" style="width: 160px;">
                    <label class="form-input-lable">
                        结束日期：
                    </label>
                    <input id="txtStartDate" type="text" name="txtStartDate" class="layui-input" />
                </div>
            </div>

            <div class="layui-inline" style="vertical-align:bottom;">
                <button type="button" class="layui-btn layui-btn-primary layui-btn-xs ufc-btn" id="btnSearch">
                    查询
                </button>
            </div>

            <div class="layui-inline" style="vertical-align:bottom;">
                <button type="button" class="layui-btn layui-btn-primary layui-btn-xs ufc-btn" id="btnReset">
                    重置
                </button>
            </div>
        </div>

        <div class="ufcSectionStyle">
            <span class="ufcSectionSpanStyle">显示区域</span>
        </div>

        <table class="layui-table" id="grid" lay-data="{text:{ none: '暂无相关数据'}}" lay-filter="grid">
            <thead>
                <tr>
                    <th lay-data="{ type: 'numbers', title: '序号', width: 30 }">序号</th>
                    <!--<th lay-data="{ type:'checkbox',width: 50}">ID</th>-->
                    <th lay-data="{ width: 200 }">件号</th>
                    <th lay-data="{ width: 200 }">工序</th>
                    <th lay-data="{ width: 200 }">模板名称</th>
                </tr>
            </thead>
        </table>
    </form>

    <script type="text/javascript" src="../../../Content/layui/dist/layui.js"></script>
    <script type="text/javascript">
        $(function () {
            layui.use(['form', 'layer', 'table', 'laydate'], function () {
                var $ = layui.$;
                var form = layui.form;
                var laydate = layui.laydate;
                var table = layui.table;
                var layer = layui.layer;
                var uid = layui.url().search.uid; //用户id
                var factoryid = layui.url().search.factoryid;
                var grid = null;

                laydate.render({
                    elem: '#txtStartDate',
                    type: 'date',
                    trigger: 'click',
                    lang: 'cn',
                    calendar: false,
                    theme: 'molv',
                    range: true
                });

                //查询按钮
                $("#btnSearch").click(function () {
                    var index = layer.load(0, { shade: [0.5, '#000'], time: 1000 * 1000 });
                    grid = table.render({
                        elem: '#grid'
                        , url: "demo.ashx"
                        , method: 'POST'
                        , cols: [[
                            { type: 'checkbox', title: '选择', width: 50 }
                            , { type: 'numbers', title: '序号', width: 30 }
                            , { field: 'zhuigandate', title: '追赶', edit: 'text', width: 120,event: 'catchDate', data_field: '' }
                            , { field: 'productname', title: '件号', width: 200 }
                            , { field: 'specno', title: '工序号', width: 200 }
                            , { field: 'filename', title: '文件名称', width: 200 }
                            , { field: 'filepath', title: '路径', width: 200 }
                            , { field: 'rbcontainertemplateid', title: 'rbcontainertemplateid', width: 200 }
                            
                        ]]
                        //, where: GetQueryObject()
                        , text: {
                            none: '暂无相关数据'
                        }
                        , request: {
                            pageName: 'page',
                            limitName: 'rows'
                        }
                        , page: {
                            theme: '#009688'
                        }
                        , limit: 15
                        , limits: [15, 30, 50]
                        , done: function (res, curr, count) {
                            layer.close(index);
                            var that = this.elem.next();
                            res.data.forEach(function (item, index) {
                                if (index % 2 !== 0) {
                                    that.find(".layui-table-box tbody tr[data-index='" + index + "'] div").css({ "background": "#86dfd9" });
                                    //that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='zhuigandate']").css({ "background": "#eee" });
                                } else {
                                    //that.find(".layui-table-box tbody tr[data-index='" + index + "'] div").css({ "background": "#86dfd9" });
                                    //that.find(".layui-table-box td[data-field='zhuigandate']").css({ "margin": "10px" });
                                }
                            });
                        }
                    });
                });

                table.on('tool(grid)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'editStartDate') {
                        var field = $(this).data('field');
                        laydate.render({
                            elem: this.firstChild
                            , show: true //直接显示
                            , closeStop: this
                            , done: function (value, date) {
                                data[field] = value;
                                obj.update(data);
                            }
                        });
                    }
                    if (obj.event === 'catchDate') {
                        var field = $(this).data('field');
                        laydate.render({
                            elem: this.firstChild
                            , show: true
                            , closeStop: this
                            , done: function (value, date) {
                                data[field] = value;
                                obj.update(data);
                            }
                        });
                    }
                });

            })
        });
    </script>
</body>
</html>
